<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Love Animation</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); opacity: 0.7; }
        }
        
        @keyframes textGlow {
            0% { text-shadow: 0 0 10px rgba(173, 216, 230, 0.7); }
            50% { text-shadow: 0 0 20px rgba(173, 216, 230, 0.9), 0 0 30px rgba(173, 216, 230, 0.5); }
            100% { text-shadow: 0 0 10px rgba(173, 216, 230, 0.7); }
        }
        
        .heart {
            position: absolute;
            pointer-events: none;
            animation: float 4s linear forwards;
            filter: drop-shadow(0 0 5px #ff69b4);
        }
        
        .love-text {
            animation: pulse 2s infinite, textGlow 3s infinite;
        }
    </style>
</head>
<body class="bg-black h-screen w-full overflow-hidden flex items-center justify-center">
    <div class="absolute inset-0 overflow-hidden" id="hearts-container"></div>
    <h1 class="love-text text-6xl md:text-8xl font-bold text-center text-[#add8e6] z-10 relative">I LOVE U</h1>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.getElementById('hearts-container');
            const targetHeartCount = 100;
            let heartCount = 0;

            // Create hearts immediately
            while (heartCount < targetHeartCount) {
                createHeart();
            }
            
            // Continue creating hearts periodically
            setInterval(() => {
                while (heartCount < targetHeartCount) {
                    createHeart();
                }
            }, 50);
            
            function createHeart() {
                const heart = document.createElement('div');
                heart.className = 'heart';
                
                // Random size between 20px and 50px
                const size = Math.random() * 30 + 20;
                
                // Random position across the screen
                const startX = Math.random() * window.innerWidth;
                const startY = window.innerHeight + size;
                
                // Random animation duration between 3s and 6s
                const duration = Math.random() * 3 + 3;
                
                // Set heart styles
                heart.innerHTML = `
                    <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="#ff69b4">
                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                    </svg>
                `;
                
                heart.style.left = `${startX}px`;
                heart.style.top = `${startY}px`;
                heart.style.animationDuration = `${duration}s`;
                
                // Random slight delay for each heart
                heart.style.animationDelay = `${Math.random() * 2}s`;
                
                container.appendChild(heart);
                heartCount++;
                
                // Remove heart after animation completes
                heart.addEventListener('animationend', () => {
                    heart.remove();
                    heartCount--;
                });
            }
            
            // Handle window resize
            window.addEventListener('resize', function() {
                const hearts = document.querySelectorAll('.heart');
                hearts.forEach(heart => heart.remove());
                heartCount = 0;
            });
        });
    </script>
</body>
</html>